import React, { Component } from 'react'
import { Modal, Switch } from 'antd-mobile'
import { TopNavHeader, SingleLine } from '../common'

const alert = Modal.alert

const data = [
  {
    left: '开仓时间',
    right: '04-11 15:10',
  },
  {
    left: '工业银',
    right: '3KG',
  },
  {
    left: '数量',
    right: '1手',
  },
  {
    left: '开仓价格',
    right: '3218',
  },
  {
    left: '方向',
    right: '多',
  },
  {
    left: '开仓成本',
    right: '8.7(含赠金8.7元)',
  },
  {
    left: '止盈',
    right: '8%',
  },
  {
    left: '止损',
    right: '32%',
  },
  {
    left: '持仓过夜',
    right: '是',
  },
]

export default class PositionParticulars extends Component {
  constructor() {
    super()
    this.state = {
      modal: false, // control modal display
      toggle: true, // contal modal switch display
    }
  }
  render() {
    const { modal, toggle } = this.state
    return (
      <Modal
        visible
        closable={false}
        className={`rt-position-particulars-modal-container`}
      >
        <TopNavHeader title="持仓明细" />
        <div className={`rt-scrollable-container`}>
          {
            data.map(v => (
              <SingleLine
                key={v.left}
                left={v.left}
                right={<span>{v.right}</span>}
              />
            ))
          }
        </div>
        <div className={`rt-operate-btn`} onClick={() => this.setState({modal: true})}>平  仓</div>

        <Modal
          className={`rt-sure-modal-box`}
          title="平仓确认"
          transparent
          visible={modal}
          onClose={this.onClose}
          closable={false}
          footer={
            [
              { text: '取消', onPress: () => { this.setState({modal: false}) } },
              { text: '平仓', onPress: () => { console.log('ok'); this.setState({modal: false}) } }
            ]
          }
        >
          <div className={`rt-confirmation-box`}>
            <div>
              <span>品种</span>
              <span className={`rt-small`}>3KG工业银</span>
            </div>
            <div>
              <span>最新价</span>
              <span className={`rt-small`}>3127</span>
            </div>
            <div>
              <span>盈亏</span>
              <span className={`rt-small rt-diff`}>+24.00</span>
            </div>
          </div>

          <div className={`rt-switch-box`}>
            <span>按实时价格成交</span>
            <Switch checked={toggle} onChange={v => this.setState({toggle: v})} />
          </div>
        </Modal>
      </Modal>
    )
  }
}